<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03 demo3</title>
</head>

<body>
    <div id="parent" style="width: auto; height: auto; background-color: lightblue;padding: 15px;">
        <button id="btn">点击我，观察控制台输出</button>
        <p>蓝色区域为父元素，默认情况下，点击按钮后，相当于先点击了父元素，然后点击了按钮，因此执行父元素绑定的事件函数，然后再执行按钮元素绑定的事件函数。</p>
        <p>为子元素button添加了e.stopPropagation()阻止事件冒泡后，只会执行子元素绑定的事件函数，而不会继续触发父元素绑定的事件函数。</p>
        <p>但阻止事件冒泡不会阻止绑定到该元素上的事件函数，即若有多个事件都绑定到了该元素，这些事件一样会被正常触发。</p>
    </div>

    <script>
        // 父元素上的事件监听
        document.getElementById("parent").addEventListener('click', function () {
            console.log("父元素被点击");
        });

        // 按钮上的第一个事件监听器
        document.getElementById("btn").addEventListener('click', function (e) {
            e.stopPropagation();  // 阻止事件冒泡
            console.log("按钮被点击 (第一个事件监听器)");
        });

        // 按钮上的第二个事件监听器
        document.getElementById("btn").addEventListener('click', function (e) {
            console.log("按钮被点击 (第二个事件监听器)");
        });
    </script>
</body>

</html>